<template>
  <div class="common_layout">
    <aside
      :style="{
        width: !leftFlag ? '210px' : '70px',
        backgroundColor: store.state.color,
      }"
    >
      <div class="logo_content">
        <img src="../assets/logo-small@2x.png" alt="" />
        <h3 v-show="!flagicon">imooc-admin</h3>
      </div>
      <el-menu
        active-text-color="#ccc"
        background-color="store.state.color"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
        router
        unique-opened
        :width="!leftFlag ? '210px' : '70px'"
        :collapse="leftFlag"
      >
        <template v-for="(item, index) in state.MenuList">
          <el-menu-item
            :key="index"
            v-if="!item.children"
            :index="item.path"
            @click="addTab(item.title, item.path)"
          >
            <el-icon><Histogram /></el-icon>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
        <template v-for="(item, index) in state.MenuList">
          <el-sub-menu :key="index" v-if="item.children" :index="index">
            <template #title>
              <el-icon><location /></el-icon>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item
              v-for="(ite, i) in item.children"
              :key="i"
              :index="ite.path"
              @click="addTab(ite.title, ite.path)"
            >
              <el-icon><location /></el-icon>
              <span>{{ ite.title }}</span></el-menu-item
            >
          </el-sub-menu>
        </template>
      </el-menu>
    </aside>
    <section>
      <header>
        <div
          class="humber_container"
          :class="leftFlag ? 'neisdjfasf' : 'neisdjf'"
        >
          <el-icon :size="40" v-show="!flagicon" @click="iconFlag"
            ><Fold
          /></el-icon>
          <el-icon :size="40" v-show="flagicon" @click="iconTrue"
            ><Expand
          /></el-icon>
          <span>个人中心</span>
        </div>
        <div class="div">
          <!-- 取色器 -->
          <div class="demo-color-block">
            <span class="demonstration">换肤</span>
            <el-color-picker v-model="color1" />
          </div>
           <el-popover
            placement="bottom-start"
            title="Title"
            :width="200"
            trigger="hover"
          >
            <el-button @click="toggleScreen">全屏模式</el-button
            ><template #reference
              ><el-icon><FullScreen /></el-icon>
            </template>
          </el-popover>
          <el-popover placement="bottom" trigger="click" :width="150">
            <slot>
              <p><el-button class="btnp">首页</el-button></p>
              <p class="sfd">
                <el-button class="btnp fwefwef">课程主页</el-button>
              </p>
              <p><el-button class="btnp" @click="out">退出登录</el-button></p>
            </slot>
            <template #reference>
              <img src="../assets/logo-small@2x.png" alt="" class="touimg" />
            </template>
          </el-popover>
        </div>
      </header>
      <!-- 顶部导航栏 -->
      <div class="topTab">
        <el-tag
          :class="closFlag == item.title ? 'tagTop' : 'tagTopa'"
          v-for="item in editableTabs"
          :key="item.title"
          :closable="closFlag == item.title ? false : true"
          @click="clickTag(item.title)"
          @close="closeTag(item.title)"
          ><span :class="closFlag == item.title ? 'TopTabspan' : ''"></span
          >{{ item.title }}</el-tag
        >
      </div>
      <main>
        <router-view></router-view>
      </main>
    </section>
  </div>
</template>

<script setup>
import { reactive, toRefs, computed, watch, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { menusList } from "@/http/api.js";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import screenfull from "screenfull";
const store = useStore();
//全屏
const toggleScreen = () => {
  // screenfull.isEnabled 判断当前浏览器是否支持全屏
  if (screenfull.isEnabled) {
    // screenfull.toggle 自动帮助我们完成了进入全屏和退出全屏
    screenfull.toggle();
  }
};
//取色
const color1 = ref(store.state.color);
//监听
watch(
  () => color1.value,
  (val) => {
    console.log(8888, val);
    store.commit("addColor", val);
  },
  { immediate: true, deep: true }
);
const state = reactive({
  MenuList: [
    {
      title: "个人中心",
      path: "/profile",
      icon: "",
      id: "0",
    },
    {
      title: "数据可视化",
      path: "/chart",
      icon: "",
      id: "1",
    },
    {
      title: "用户",
      icon: "",
      children: [
        {
          title: "员工列表",
          path: "/user/manage",
          icon: "",
          id: "2",
        },
        {
          title: "角色列表",
          path: "/user/role",
          icon: "",
          id: "3",
        },
        {
          title: "权限列表",
          path: "/user/permission",
          icon: "",
          id: "4",
        },
      ],
    },
    {
      title: "文章",
      icon: "",
      children: [
        {
          title: "文章排名",
          path: "/article/ranking",
          icon: "",
          id: "5",
        },
        {
          title: "创建文章",
          path: "/article/create",
          icon: "",
          id: "6",
        },
      ],
    },
  ],
});
//顶部tab栏
const editableTabs = ref([]);
//左侧菜单选中会触发的事情
const closFlag = ref("");
//左侧菜单的显示隐藏
const leftFlag = ref(false);
//icon显示隐藏
const flagicon = ref(false);

let router = useRouter();

//点击退出
const out = () => {
  ElMessageBox.confirm(
    "proxy will permanently delete the file. Continue?",
    "Warning",
    {
      confirmButtonText: "OK",
      cancelButtonText: "Cancel",
      type: "warning",
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "Delete completed",
      });
      store.state.userInfo = null;
      store.state.user = [];
      store.state.editableTabs = [];
      localStorage.removeItem("closFlag");
      router.push("/login");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};

//顶部删除
const closeTag = (name) => {
  store.commit("remTop", name);
  editableTabs.value = store.state.editableTabs;
};
//顶部tab选中触发的事件
const clickTag = (title) => {
  closFlag.value = title;
  localStorage.setItem("closFlag", closFlag.value);
  editableTabs.value.forEach((item) => {
    if (item.title == title) {
      router.push(item.path);
    }
  });
};
//添加顶部tab
const addTab = (title, path) => {
  closFlag.value = title;
  localStorage.setItem("closFlag", closFlag.value);
  var a = editableTabs.value.findIndex((item) => {
    return item.title === title;
  });
  if (a == -1) {
    store.commit("addTop", {
      title: title,
      path: path,
    });
    editableTabs.value = store.state.editableTabs;
  }
  router.push(path);
};
//控制左侧菜单的显示隐藏
const iconFlag = () => {
  leftFlag.value = true;
  flagicon.value = true;
};
//控制左侧菜单的显示隐藏
const iconTrue = () => {
  leftFlag.value = false;
  flagicon.value = false;
};
// let menus = async () => {
//   await menusList();
// };
onMounted(() => {
  // menus();
  editableTabs.value = store.state.editableTabs;
  closFlag.value = localStorage.getItem("closFlag");
});
</script>

<style scoped lang="scss">
.common_layout {
  height: 100%;
  display: flex;
  aside {
    background-color: #2c3e50;
    transition: 0.3s linear;
    .el-menu {
      border-right: none;
      transition: 0.3s linear !important;
    }
    .logo_content {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20px 0 20px 0;
      img {
        width: 44px;
        height: 44px;
      }
      h3 {
        color: #fff;
        margin-left: 10px;
      }
    }
  }
  section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    header {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #ccc;
      box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
      display: flex;
      .humber_container {
        display: flex;
        line-height: 50px;
        width: 180px;
        height: 100%;
        float: left;
        cursor: pointer;
        .el-icon {
          width: 50px;
          height: 50px;
        }
      }
      .div {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
    main {
      flex: 1;
      max-height: 100%;
      overflow: auto;
      //   background-color: pink;
    }
  }
  .topTab {
    height: 30px;
    border-bottom: 1px solid #ccc;
  }
  .TopTabspan {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 5px;
  }
  .tagTop {
    margin-left: 5px;
    color: #fff;
    cursor: pointer;
    background-color: rgb(48, 65, 86);
  }
  .tagTopa {
    margin-left: 5px;
    color: #000;
    cursor: pointer;
    background-color: #fff;
  }
  .touimg {
    width: 35px;
    height: 35px;
    float: right;
    cursor: pointer;
    margin-top: 10px;
    margin-right: 20px;
  }
  .sfd {
    border-bottom: 1px solid #ccc;
  }
  .fwefwef {
    margin-bottom: 15px;
  }
  .btnp {
    width: 100%;
  }
}
</style>
